<template>
  <div>
    <!-- 访问简化后的count -->
    <h1>{{ count }}</h1>
    <!-- 访问简化后的count10(计算属性getters) -->
    <h1>{{ count10 }}</h1>
    <!-- 访问简化后子模块里的cartList -->
    <h1>{{ cartList }}</h1>

    <!-- 调用根add -->
    <button @click="$store.commit('add')">点我1</button>
    <button @click="fn1">点我2</button>

    <button @click="fn2">点我3</button>
    <button @click="add">点我调用add</button>

    <button @click="$store.dispatch('reqAdd')">点我-调用actions</button>
    <button @click="reqAdd">点我-调用actions</button>

    <button @click="$store.commit('cart/add')">调用子里的add</button>
    <!-- 上面点击事件里的代码可以用 ...mapMutations('cart', ['add] ) 来简化访问-->
    <!-- 简化后，@click只要写 add 即可 -->
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  computed: {
    // count () {
    //   return this.$store.state.count
    // }
    ...mapState(['count']),

    // count10 () {
    //   return this.$store.getters.count10
    // }
    ...mapGetters(['count10']),

    // cartList () {
    //   return this.$store.state.cart.cartList
    // }
    ...mapState('cart',['cartList'])
  },

  methods: {
    // add () {
    //   this.$store.commit('add')
    // },
    ...mapMutations(['add']),
    // reqAdd () {
    //   this.$store.dispatch('reqAdd')
    // },
    ...mapActions(['reqAdd']),

    fn1 () {
      console.log('按钮2被点')
      // 调用vuex里的方法---写的长
      this.$store.commit('add')
    },

    fn2 () {
      console.log('fn2被调用')
      // 调用自己文件里的方法-----写的短
      this.fn3()
      this.add()
    },

    fn3 () {
      console.log('fn3被调用')
    }
  },
  created () {

    console.log('created', this.count)
  }
}
</script>

<style>

</style>